<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .loginType:hover {
        color: orange;
    }

</style>
<link th:href="@{/css/sg.css}" type="text/css" rel="stylesheet">
<div th:replace="fragment/js::js"></div>
<body style="margin: 0">
<div>
    <div style="background: orange;height: 60px;display: flex;justify-content: center;padding-bottom: 10px">
        <div class="sg-container" style="display: flex;justify-content: space-between;align-items: flex-end ">
            <div>
                <div style="font-size: 32px;font-weight: bold;color: white">白给商家中心</div>
            </div>
            <div style="display: flex;color: white">
                <div >美团首页</div>
                <div style="margin-left: 10px">下载美团</div>
            </div>
        </div>
    </div>
    <div style="display: flex;justify-content: center;">
        <div class="sg-container" style="border: solid lightgray 1px;margin: 70px auto;">
            <div style="padding: 20px 40px">
                <div style="font-size: 30px;font-weight: bold">商家登录</div>
                <div style="display: flex;">
                    <div style="border-right: solid 1px lightgray;width: 50%">
                        <form class="layui-form layui-form-pane" style="padding: 20px">
                            <div style="display: flex;border-bottom: solid 1px  lightgray;justify-content: center;padding: 10px">
                                <div class="loginType"
                                     style="font-size: 20px;padding: 5px 10px;cursor: pointer;color: orange"
                                     id="passwordLogin"
                                >密码登录
                                </div>
                                <div class="loginType"
                                     style="font-size: 20px;padding: 5px 10px;margin-left: 20px;cursor: pointer"
                                     id="codeLogin"
                                >短信登录
                                </div>
                            </div>
                            <div class="layui-form-item" style="margin-top: 10px">
                                <label class="layui-form-label">手机号</label>
                                <div class="layui-input-block">
                                    <input type="text" name="phone" id="phone" placeholder="请输入密码" autocomplete="off"
                                           lay-verify="required|phone|number"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item" id="passDiv">
                                <label class="layui-form-label">密码</label>
                                <div class="layui-input-block">
                                    <input type="password" name="password" placeholder="请输入密码" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item" id="codeDiv" style="display: none">
                                <label class="layui-form-label">验证码</label>
                                <div class="layui-input-block" style="display: flex">
                                    <input id="cd" type="tel" name="code" placeholder="请输入6位数验证码"
                                           class="layui-input" style="border-radius: 0;border-right: none">
                                    <button id="sendCode" type="button" class="layui-btn-primary layui-btn"
                                            style="border-radius: 0 3px 3px 0">
                                        发送验证码
                                    </button>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn " lay-submit lay-filter="loginForm"
                                        style="width: 100%;background: orange">登录
                                </button>
                            </div>
                            <div class="layui-form-item">
                                <a th:href="@{/pages/back/merchant/addPre}">
                                <button type="button" class="layui-btn layui-btn-primary " style="width: 100%;"
                                        onmouseenter="this.style.border='solid orange 1px'"
                                        onmouseleave="this.style.border='solid lightgray 1px'">申请入住
                                </button>
                                </a>
                            </div>
                        </form>
                    </div>
                    <div style="text-align: center;width: 50%">
                        <div style="font-size: 25px;font-weight: bold;padding: 10px;color: orange">随时随地叫闪购</div>
                        <div><img th:src="@{/images/loginPage/code.png}"/></div>
                        <div style="font-size: 20px; padding: 10px">闪购开店宝客户端</div>
                        <div style="color: gray;font-size: 18px">财源滚滚,生意兴隆</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr style="height: 2px;background: orange">
    <div style="display: flex;justify-content: center;padding-bottom: 10px">
        <div class="sg-container"
             style="display: flex;justify-content: space-between;align-items: flex-end ">
            <div style="display: flex;justify-content: space-between;width: 100%;padding: 15px">
                <div style="display: flex;">
                    <div>
                        <div style="padding: 10px;background: orange;border-radius: 10px">
                            <i style="font-size: 40px;color: white"
                               class="layui-icon-service layui-icon"></i></div>
                    </div>
                    <div style="margin-left: 18px;padding:0 10px 10px 0">
                        <div style="font-weight: bold;font-size: 18px;padding: 0  5px 5px 0">商家咨询请致电</div>
                        <div style="color: gray;font-weight: bold;padding:  0  5px 5px 0">1010-5557</div>
                        <div style="color: gray;padding:  0  5px 5px 0">周一到周日09:00-21:00</div>
                    </div>
                </div>
                <div style="display: flex;">
                    <div>

                    </div>
                    <div style="margin-left: 18px;padding:0 10px 10px 0">
                        <div style="font-weight: bold;font-size: 18px;padding: 0  5px 5px 0">商家电话验证请致电</div>
                        <div style="color: gray;font-weight: bold;padding:  0  5px 5px 0">400-618-5335</div>
                    </div>
                </div>
                <div style="display: flex;">
                    <div>

                    </div>
                    <div style="margin-left: 18px;padding:0 10px 10px 0">
                        <div style="font-weight: bold;font-size: 18px;padding: 0  5px 5px 0">消费者咨询请致电</div>
                        <div style="color: gray;font-weight: bold;padding:  0  5px 5px 0">1010-7888</div>
                        <div style="color: gray;padding:  0  5px 5px 0">周一到周日09:00-22:00</div>
                    </div>
                </div>
                <div style="display: flex;">
                    <div>
                        <div style="padding: 10px;background: orange;border-radius: 10px">
                            <i style="font-size: 40px;color: white"
                               class="layui-icon-email layui-icon"></i></div>
                    </div>
                    <div style="margin-left: 18px;padding:0 10px 10px 0">
                        <div style="font-weight: 550;font-size: 18px;padding: 0  5px 5px 0">廉政邮箱</div>
                        <div style="color: gray;font-weight: bold;padding:  0  5px 5px 0">lianzheng@meituan.com</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript" type="text/javascript">
    // top:指的是当前页面最外层的窗口
    // self:指的是当前页面的窗口
    if (top !== self) {// 顶层窗口不是当前窗口，顶层窗口地址设置为当前窗口地址
        top.location.href = self.location.href;// 解决iframe登陆页面 窗口内嵌到后台中的问题
    }

    let loginType = 'password';// 登录的方式
    $(function () {
        layui.use(['layer', 'form'], function () {
            let layer = layui.layer;
            let form = layui.form;
            $("#passwordLogin").click(function () {// 这里用的ES6语法，那么这个this就不是当前jsDom对象了；如果用layui和thymeleaf开发，
                // 那么我们不用箭头，如果用vue建议全都用箭头函数
                loginType = 'password';
                $("#passDiv").css({display: ''})
                $("#codeLogin").css({color: ''});
                $(this).css({color: 'orange'});
                $("#codeDiv").css({display: 'none'})
                $("#cd").val("")
            });

            $("#codeLogin").click(function () {
                loginType = 'code';
                $("#passwordLogin").css({color: ''})
                $(this).css({color: 'orange'});
                $("#codeDiv").css({display: ''})
                $("#passDiv").css({display: 'none'})
            });
            form.on('submit(loginForm)', function (data) {
                console.log(loginType)
                if (loginType == 'password') {// 表示是密码提交，那么就应该验证密码
                    if (data.field.password.length < 6) {
                        layer.msg("密码长度少于6位！");
                        return false;// 结束了，不要往后走了
                    }
                } else if (loginType == 'code') {// 验证码登录的时候
                    if (!/^\d{6}$/.test(data.field.code)) {
                        layer.msg("验证码是6位整数！");
                        return false;// 结束了，不要往后走了
                    }
                }
                // 如果能够走到这异步，那么就发送ajax请求去登录
                console.log(data)
                $.post('/login', data.field, function (res) {
                    layer.msg(res.msg);
                    if (res.res) {
                        window.location = '/pages/back/home?isBack=1';
                    }
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

            $("#sendCode").click(function () {
                console.log("发送")
                $.post('/sendLoginCode', {phone: $("#phone").val()}, function (res) {
                    layer.msg(res.msg);
                    if (res.res) {
                        let x = 60;
                        let inter = setInterval(function () {
                            if (x > 0) {
                                $("#sendCode").text(x + '秒后重发');
                                x--;
                            } else {
                                $("#sendCode").text('发送验证码');
                                clearInterval(inter);// 取消循环函数；
                            }
                        }, 1000)
                    }
                });
            })
        });
    })

</script>


</body>
</html>
